<template>
    <framework title="招贤纳士" :bg="require('@/assets/img/recruitment-header.png')"
               :path="[{name:'招贤纳士',path:'/recruitment'}]"
               :wrap-style="{padding:0, background: '#F3F3F3'}">

        <div class="sq_recruitment">
            <div class="top">
                <div class="right">
                    <span class="f1">{{ aboutData.joinUsTitle }}</span>
                    <br>
                    <div class="content f3" v-html="aboutData.joinUsIntroduce">

                    </div>
                </div>
            </div>
            <div class="center-bottom">
                <div class="center-warp">
                    <div class="title f1">我们提供：</div>
                    <div class="center">
                        <div class="evn-item" v-for="(item,index) in aboutDataImages" :key="index">
                            <img :src="item" alt="">
                        </div>
                    </div>
                </div>


                <div class="bottom">
                    <div class="headline">
                        <span class="blood f1">如果您：</span>
                        <span class="f1">对工作怀有激情，追求卓越；</span>
                        <br/>
                        <br/>
                        <div class="f1">
                            三秋将为您提供一个施展才华的平台，请投递简历到：1575421815@qq.com
                        </div>
                    </div>

                    <div class="list_box" v-for="(item,index) in bottomList" :key="index">
                        <div class="list_box-box">
                            <div class="list_box-top f2">
                                <span>{{ item.position }}</span>
                                <span>发布时间：{{ item.updateTime }}</span>
                                <span>工作经验：{{ item.experience }}</span>
                            </div>
                            <hr>
                            <div class="job-content">
                                <div class="job-content-header blood f2">岗位职责：</div>
                                <div class="job-content-content f3" v-html="item.description"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </framework>
</template>

<script>
import framework from '@/components/frameworks'

//招贤纳士
export default {
    name: "Recruitment",
    components: {framework},
    data() {
        return {
            bottomList: [],
            aboutData: {},
            aboutDataImages:[]
        }
    },

    async mounted() {
        let aboutData = await this.$http.get('/aboutus/info')
        this.aboutData = aboutData.aboutUs
        this.aboutDataImages = JSON.parse(this.aboutData.img3)
        let data = await this.$http.get('/joinus/findAllPage')
        this.bottomList = data.page.list


    }
}
</script>

<style scoped lang="less">
.sq_recruitment {

    overflow: hidden;
    //padding: 0 360px;
    width: 1200px;
    margin: 0 auto;
    .top {
        display: flex;
        flex-direction: row;
        padding: 3% 0;
        .right {
            display: flex;
            flex-flow: column wrap;
            margin: auto;
            position: relative;
            span {
                font-weight: 400;
            }
            .content {
                font-weight: 400;
                line-height: 26px;
                letter-spacing: 4px;
                text-indent: 2rem;
            }
        }
    }

    .center-warp {
        .title {
            padding: 80px 0 48px 0;
            margin: auto;
            font-weight: 400;
            line-height: 30px;
        }

        .center {
            //width: calc(100% - 100px);
            height: 50%;
            overflow: hidden;
            margin: 0 auto;
            //padding: 160px 0; /*下面代码是兼容各个浏览器的，并实现了四列，没两列之间间距为30px，*/
            -moz-column-count: 2;
            -moz-column-gap: 30px;
            -webkit-column-count: 2;
            -webkit-column-gap: 30px;
            -o-column-count: 2;
            -o-column-gap: 30px;
            .evn-item {
                break-inside: avoid;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                padding: 14px 0;

                img {
                    width: 100%;
                }
            }

        }
    }


    .bottom {
        .headline {
            height: 100px;
            margin: 1cm auto;
        }
        .list_box {
            .list_box-box {
                background: #FFFFFF;
                border-radius: 5px;
                border: 1px solid rgba(192, 192, 192, 0.4470588235294118);
                box-shadow: 0 0px 2px rgba(0, 0, 0, 0.16);
                margin: 20px auto;
                padding: 10px 20px;
                letter-spacing: 0.5px;
                .list_box-top {
                    display: flex;
                    //justify-content: space-between;
                    padding: 0 0 0px 0;
                    margin: 5px 0;
                    span {
                        flex: 1;
                        font-weight: 400;
                    }
                }
                hr {
                    margin-bottom: 5px;
                }
                .job-content {
                    .job-content-content{
                        line-height: 25px;
                        text-indent: 2rem;
                    }
                }
            }
        }
    }
}

</style>


<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .sq_recruitment {
            .top {
                flex-direction: column;

                .left > img {
                    width: 100%;
                }

                .right {
                    width: 100%;
                    margin: 0;

                    span {
                    }

                    p {
                        text-indent: 2rem;
                    }
                }
            }

            .center-warp {
                padding: 0;

                .title {
                    font-size: 22px;
                }

                .center {
                    width: calc(100% - 20px);
                    padding: 0 10px;
                    display: flex;
                    flex-direction: column;
                    .evn-item{
                        display: block;
                        width: 100%;
                        img{
                            width: 100%;
                        }
                    }
                }
            }

            .bottom {
                padding: 0 10px;

                .headline {
                    font-size: 20px;
                    height: auto;
                }

                .list_box {
                    .list_box-box {
                        .list_box-top {
                            flex-direction: column;
                            margin: 5px 0;

                            span {
                                font-size: 18px;
                            }
                        }

                        hr {
                            margin-bottom: 5px;
                        }

                        .job-content {
                            text-indent: 0;

                            .job-content-header {
                            }

                            p > img {
                                width: 100%;
                                display: table-cell
                            }
                        }
                    }
                }
            }

        }
    }
}
</style>
